import ProForm, {
  ModalForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, message, Popconfirm } from 'antd';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import React, { useRef, useState } from 'react';
import {
  addHotSearch,
  changeContent,
  changeStatuHotSearches,
  clearTimes,
  deleteHotSearch,
  getAllHotSearches,
} from '@/service/hotSearch';
import { formatTime } from '@/common/publicFun';
import { changeStatus, getBugs } from '@/service/bug';

export default function BugContent() {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      hideInSearch: true,
      align: 'left',
    },
    {
      title: '内容',
      dataIndex: 'content',
      // hideInSearch: true,
      align: 'left',
    },
    {
      title: '提交人ID',
      dataIndex: 'userId',
    },
    {
      title: '创建时间',
      dataIndex: 'create_Ts',
      hideInSearch: true,
      sorter: (a, b) => {
        return Number(a.create_Ts) - Number(b.create_Ts);
      },
      align: 'left',
      render: (_, _record) => (
        <span>{formatTime(_record.create_Ts, 'FULL_TIME')}</span>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      editable: false,
      valueEnum: {
        1: { text: '未解决', color: 'yellow' },
        0: { text: '已解决', color: 'green' },
      },
    },
    {
      title: '操作',
      align: 'center',
      width: 300,
      key: 'option',
      valueType: 'option',
      render: (_, _record, index, action) => [
        <a
          key={'changeStatu' + _record.content + index}
          onClick={() => {
            handleChangeStatus({ id: _record.id });
          }}
        >
          {_record.status ? '标记为已解决' : '标记为未解决'}
        </a>,
      ],
    },
  ];

  async function handleChangeStatus(params: { id: string }) {
    const data = await changeStatus(params);
    if (data.stat === 'ok') {
      message.success('操作成功');
      actionRef.current?.reload();
      return true;
    } else {
      message.error('操作失败，' + data.msg);
    }
  }

  return (
    <React.Fragment>
      <ProTable
        actionRef={actionRef}
        pagination={{ pageSize: 7, current: 1, showSizeChanger: true }}
        columns={columns}
        rowKey={'content'}
        search={{ defaultCollapsed: false }}
        request={async (params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          const data = await getBugs({
            content: params.content,
            offset: (params.pageSize || 7) * ((params.current || 1) - 1),
            limit: params.pageSize || 7,
            status:
              params.status === '0' ? 0 : params.status === '1' ? 1 : undefined,
            userId: params.userId,
            ...sorter,
          });
          return data.data;
        }}
      />
    </React.Fragment>
  );
}
